<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <button id="test">欢迎学习Layer</button> -->
		<button id="test1">0 (信息框，默认)</button><br/>
		<button id="test2">1 (页面层)</button><br/>
		<button id="test3">2 (iframe层 可以嵌套一个网页)</button><br/>
		<button id="test4">3（加载层）</button><br/>
		<button id="test5">4（tips层）</button><br/>
		<button id="test6">Alert</button><br/>
		<button id="test7">Confirm</button><br/>
		<button id="test8">弹出一块dom区域来</button><br/>
		<button id="test9">绑定多个按钮</button><br/>
		
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#test1').click(function(){
				//layer.msg('Hello Layer');
				//layer.msg('Hello Layer!!',{time:3000});
				//layer.alert('这是一个警告');
				layer.open({
					type:0,
					content:'弹出的内容'
				});
			})
			$('#test2').click(function(){
				layer.open({
					type:1,
					content:'弹出的内容'
				});
			})
			$('#test3').click(function(){
				layer.open({
					type:2,
					content:'bootstrap1.html',
					area:['800px','700px']
				});
			})
			$('#test4').click(function(){
				layer.open({
					type:3
				});
			})
			$('#test5').click(function(){
				layer.open({
					type:4,
					cotent:['这是一个tips提示','#test5']
				});
			})
			$('#test6').click(function(){
				//layer.alert('简单的alert');
				layer.alert(
				   '这是一个严重的警告',
				   {icon:2},//叉号
				   function(index){
					   console.log(index);
					   layer.close(index);
				   }
				);
			})
			$('#test7').click(function(){
				layer.confirm(
				    '你确定要删除吗?',
					{icon:3,title:'确认'},
					function(index){
						layer.close(index);
					},
					function(){
						console.log('取消');
					}
				);
			})
			$('#test8').click(function() {
				layer.open({
					type: 1,
					area: ['500px','300px'],
					content: $('#divId')
				});
			})
			$('#test9').click(function() {
				layer.open({
					type: 0,
					contend:'测试',
					btn:['按钮1','按钮2','按钮3'],
					yes:function(index){
						console.log('点击了第一个按钮');
						layer.close(index);
					},
					btn2:function(){
						console.log('点击了第二个按钮');
						//返回false，当点击第二个按钮后不会自动消失
						return false;
					},
					btn3:function(){
						console.log('点击了第三个按钮')
					}
				});
			})
		</script>
		<div id="divId" style="display: none;">
			用户名:<input type="text" />
		</div>
	</body>
</html>